<template>
  <view class="wallet-container">
    <view class="card-container default-box-shadow">
      <view class="card-item" @click="addCard('/pages/wallet/addCard')">
        <image
          src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01HREWlu2BzNRSsAKrP_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
        />
        <view class="not-card-contentt">添加新的收款账户~</view>
        <view class="arrow-right">
          <text class="add-tip">去添加</text>
          <u-icon name="arrow-right" color="#56d39d" size="28"></u-icon>
        </view>
      </view>
    </view>
    <!-- 账户列表 -->
    <view
      v-for="item in accountList"
      :key="item.id"
      class="card-container default-box-shadow">
      <view class="card-item">
        <image
          v-if="item.payment_type === '0'"
          src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01MIyfdQ2BzNSgYnzMZ_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
          @click="handleSetDefaultAccount(item)"
        />
        <image
          v-else="item.payment_type === '1'"
          src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01UsAarc2BzNSfEIfot_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
          @click="handleSetDefaultAccount(item)"
        />
        <view class="not-card-contentt" @click="handleSetDefaultAccount(item)">
          <view class="real_name">{{ item.real_name }}</view>
          <view class="card_no">{{ item.card_no }}</view>
        </view>
        <view class="arrow-right">
          <u-icon name="edit-pen" color="#7d7e80" size="44" @click="addCard(`/pages/wallet/addCard?id=${item.id}`)" style="margin-right: 24rpx;"></u-icon>
          <u-icon name="trash" color="#7d7e80" size="44" @click="deleteAccount(item.id)"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fundCardListByUserId, deleteFundCard, setDefaultAccount } from '@/api/financialManagement';
export default {
  data() {
    return{
      accountList: []
    }
  },
  onShow() {
    this.getFundCardList();
  },
  methods: {

    // 获取账户列表
    getFundCardList() {
      fundCardListByUserId().then(result => {
        if (result && result.data && result.data.length > 0) {
          this.accountList = result.data;
        } else {
          this.accountList = [];
        }
      })
    },

    // 设置支付宝账号
    addCard(url) {
      uni.navigateTo({ url })
    },

    // 设置默认账户
    handleSetDefaultAccount(item) {
      item.is_default = '1';
      setDefaultAccount({
        id: item.id,
        is_default: '1',
      }).then(result => {
        if (result && result.data) {
          uni.showToast({
            title: '选择成功！',
            icon: 'none',
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
              fail: () => {
                uni.switchTab({ url: '/pages/mine/index' })
              }
            })
          }, 500)
        }
      })
    },

    // 删除账户
    deleteAccount(id) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      deleteFundCard({ id }).then(result => {
        uni.hideLoading();
        if (result && result.code === 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'none'
          })
          this.getFundCardList();
        }
      }).catch(() => {
        uni.hideLoading();
      })
    }
  }
}

</script>

<style lang="scss">
  page{
    background-color: #f5f5f5;
  }

  .wallet-container{
    padding: 32rpx;

    .card-container{
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
      box-shadow: 0 4px 30rpx 0 rgba(0,0,0,.06);
      background: #fff;

      .card-item{
        display: flex;
        align-items: center;

        .card-icon{
          width: 88rpx;
          height: 88rpx;
        }

        .card-icon2{
          width: 32rpx;
          height: 32rpx;
        }

        .not-card-contentt{ 
          margin-left: 24rpx;
          font-size: 28rpx;
          flex: 1;
        }

        .add-tip{
          color: $uni-color-primary;
          font-size: 28rpx;
        }

        .real_name{
          font-size: 28rpx;
          margin-bottom: 6rpx;
        }

        .card_no{
          font-size: 28rpx;
        }
      }

      .card-item2{
        padding: 32rpx 0;

        .not-card-contentt{
          margin-left: 12rpx;
        }

        .real_name{
          margin-left: 0;
        }
      }
    }
  }
</style>
